/**
 * User: Célia Calçada
 * Date: 10-08-2013
 * Trailer navigation view
 */

Ext.define('Mobile-app.view.Trailer', {
    extend: 'Ext.navigation.View',
    alias: 'widget.trailerpanel',

    config: {

        title: $.t('main.trailer_plural'),
        iconCls: 'locate',
        navigationBar: false,

        items: [
            {
                id: 'trailerList',
                fullscreen: true,
                xtype: 'list',
                style: 'font-size:65%',

                cls: 'panel-letter',
                itemTpl: new Ext.XTemplate('<table border=0>',
                    '<tr>',
                    '<td rowspan=3 width=80 align="center">',
                    '<tpl if="state == \'Connected\'">',
                        '<img src="resources/icons/link.png">',
                    '<tpl else>',
                        '<img src="resources/icons/link_delete.png">',
                    '</tpl>',
                    '</td>',
                    '<td><b>', $.t('main.licensePlate'), '</b>:</b> {licensePlate}</td>',
                    '</tr>',
                    '<tr>',
                    '<td><b>',
                    $.t('main.connectionDate'),
                    ':</b> {connectionDate:this.dateFormat}</td>',
                    '</tr>',
                    '<tr>',
                    '<td><b>',
                    $.t('main.disconnectionDate'),
                    ':</b> {disconnectionDate:this.dateFormat}</td>',
                    '</tr>',
                    '</table>',
                    {
                        /***
                         * Will format the date on a human readable format
                         * @param timestamp
                         * @returns {String}
                         */
                        dateFormat: function (timestamp) {
                            return !timestamp ? null : Ext.Date.format(new Date(timestamp), 'd-m-Y');
                        }
                    }),

                store: Ext.create('Ext.data.Store', {
                    model: 'Mobile-app.model.Trailer',
                    listeners: {
                        exception: function(store, response, op) {
                            op.records = [];
                        }
                    }
                }),
                items: [
                    {
                        xtype: 'toolbar',
                        docked: 'top',

                        items: [
                            { xtype: 'spacer' },
                            {
                                itemId: 'search',
                                xtype: 'searchfield',
                                placeHolder: $.t('main.search') + '...'
                            },
                            { xtype: 'spacer' }
                        ]
                    }
                ]
            }
        ],
        listeners: [
            {
                event: 'painted',
                fn: 'loadStore'
            },
            {
                delegate: '#trailerList',
                event: 'itemtap',
                fn: 'showDetails'
            },
            {
                delegate: '#search',
                event: 'keyup',
                fn: 'filterList'
            },
            {
                delegate: '#search',
                event: 'clearicontap',
                fn: 'clearFilter'
            }
        ]
    },

    /***
     * Will load the trailer list
     */
    loadStore: function () {

        this.fireEvent('loadStore', this.down('list'));
    },

    /***
     * Called whenever an item of this list is tapped
     * @param list Ext.DataView.List
     * @param index The index of the item tappe
     * @param target The element or DataItem tapped
     * @param record The record associated to the item
     * @param e The event object
     * @param eOpts The options object passed to Ext.util.Observable.addListener
     */
    showDetails: function (list, index, target, record, e, eOpts) {
        this.fireEvent('showDetails', list, record);
    },

    /***
     * The search field
     * @param field
     */
    filterList: function(field){
        this.fireEvent('filterList', this, this.down('list'), field);
    },

    /***
     * Will clear the filter on the list
     */
    clearFilter: function(){

        this.fireEvent('clearFilter', this.down('list'));

    }
});